<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>维修端</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
		<style>
			body {
				font-family: -apple-system, system-ui;
			}

			.nav-bg {
				background: #1976D2;
			}

			.stat-box {
				background: white;
				border-radius: 8px;
				padding: 12px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.status-icon {
				width: 24px;
				margin-right: 8px;
			}

			.nav-tab {
				flex: 1;
				color: #757575;
				padding: 12px;
			}

			.nav-tab.active {
				color: #1976D2;
			}
		</style>
	</head>
	<body class="bg-light">
		<!-- 顶部标题 -->
		<header class="nav-bg text-white p-3">
			<h5 class="mb-0">维修端</h5>
		</header>

		<main class="container pt-3">
			<!-- 统计区域 -->
			<div class="row g-3 mb-4">
				<div class="col-6">
					<div class="stat-box">
						<h4 class="mb-0">10</h4>
						<small class="text-muted">今日申请</small>
					</div>
				</div>
				<div class="col-6">
					<div class="stat-box">
						<h4 class="mb-0">15</h4>
						<small class="text-muted">本月申请</small>
					</div>
				</div>
			</div>

			<!-- 故障维修模块 -->
			<div class="bg-white rounded-3 p-3 mb-3">
				<div class="d-flex justify-content-between mb-3">
					<h6 class="mb-0">故障维修</h6>
					<a href="ChuLiZhong.html" class="text-decoration-none">全部工单 ></a>
				</div>

				<div class="row g-3">
					<div class="col-6">
						<div class="d-flex align-items-center text-primary">
							<i class="fas fa-file-alt status-icon"></i>
							<div>
								<div class="small">处理中</div>
								<small>2待处理</small>
							</div>
						</div>
					</div>
					<!-- 其他状态项类似，替换图标和颜色 -->
					<div class="col-6">
						<div class="d-flex align-items-center text-success">
							<i class="fas fa-file-signature status-icon"></i>
							<div>
								<div class="small">待审核</div>
								<small>2待处理</small>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="d-flex align-items-center text-danger">
							<i class="fas fa-file-invoice-dollar status-icon"></i>
							<div>
								<div class="small">待支付</div>
								<small>2待处理</small>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="d-flex align-items-center text-success">
							<i class="fas fa-sync-alt status-icon"></i>
							<div>
								<div class="small">施工中</div>
								<small>2待处理</small>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="d-flex align-items-center text-warning">
							<i class="fas fa-check-circle status-icon"></i>
							<div>
								<div class="small">已完成</div>
								<small>5已完成</small>
							</div>
						</div>
					</div>
					<div class="col-6">
						<div class="d-flex align-items-center text-purple">
							<i class="fas fa-times-circle status-icon"></i>
							<div>
								<div class="small">已取消</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 维修管理 -->
			<div class="bg-white rounded-3 p-3">
				<div class="d-flex align-items-center">
					<i class="fas fa-plus-circle text-primary me-2"></i>
					<span>创建工单</span>
				</div>
			</div>
		</main>

		<!-- 底部导航 -->
		<nav class="fixed-bottom bg-white d-flex">
			<a href="#" class="nav-tab active">
				<i class="fas fa-home d-block text-center"></i>
			</a>
			<a href="ChuLiZhong.html" class="nav-tab">
				<i class="fas fa-user d-block text-center"></i>
			</a>
		</nav>

		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	</body>
</html>